import { useEffect, useState } from 'react';
import { AixAPI } from '@api/aix';
import Select from 'react-select';
import styles from './StatusPage.module.css';

const SophontCard = (props:any)=>{
    return (
        <div className={styles.sophontCard}>
            <span>{props.sophont.tagName}</span>
        </div>
    )
}

const PlanetCard = (props:any)=>{
    return (
        <div className={styles.planetCard}>
            <h3>{props.planet.id}#{props.planet.name}</h3>
            {
                props.planet.projectList.map((p:any)=>(
                    <div key={p.id}>
                        <p>{p.owner}/{p.repo}</p>
                    </div>
                ))
            }
            <div className={styles.sophontHolder}>
                {
                    props.planet.sophontList.map((s:any)=>{
                        return(<SophontCard key={s.id} sophont={s} />)
                    }) 
                }
            </div>
        </div>
    )
}

const StatusPage = () => {
    const [solars, setSolars] = useState<any[]>([]);
    const [selectedSolar, setSelectedSolar] = useState<any>(null);

    useEffect(() => {
        (async ()=>{
            const  aixAPI = new AixAPI();
            const resp:any = await aixAPI.GetStatus();
            
            const listSolars = resp.data.map((s:any)=> {
                return {
                    value:s.id,
                    label:s.name,
                    serviceId:s.serviceId,
                    planets: s.planetList
                }
            });

            setSolars(listSolars);
            if(listSolars.length > 0){
                setSelectedSolar(listSolars[0]);
            }

        })();
    }, []);

    const handleChange = (e:any) => {
        setSelectedSolar(e);
    }

    return (
        <div className={styles.container}>
            <div className={styles.solarSelectionHolder}>
                <span>Solars:</span>
                <Select options={solars} value={selectedSolar} className={styles.solarSelection} onChange={handleChange} />
            </div>
            <div className={styles.planetHolder}>
                {
                    selectedSolar && selectedSolar.planets.map((p:any)=>(
                        <PlanetCard key={p.id} planet={p} />
                    ))
                }
            </div>
        </div>
    );
}

export { StatusPage };